import React, { useReducer } from "react";

/* hooks是一个函数，该函数的名字以use开头
hooks是可以让函数组件拥有类组件中的特征：ref state 生命周期
useState:让函数组件拥有状态
         const [state,setState] = useState(1);
useRef:让函数组件拥有ref
         const a = useRef();
useCallback:可以让函数产生记忆。
        const cb= useCallback(function(){},[])
useMemo:可以让结果产生记忆。（类似于VUE 计算属性）
         const result = useMemo(function(){},[a]);
useContext:可以让函数组件进行跨组件传递参数。
     src->context->index.js---> export default React.createContext();
     Provider:提供者
     Consumer:消费者
     传递数据  <Provider value={向下传递的数据}>   </Provider>
     接收数据  const state = useContext(globalContext);
useReducer:是useState的另外一种解决方案。
     const [state,dispatch] = useReducer(reducer函数，initState);
     挂载时：
          // 定义了一个名字为state的常量，值为{a:1,b:2}
          // 定义了一个名字为dispatch的函数。
          // dispatch({type:类型（一般大写），payload:荷载的数据});
          const [state,dispatch]= useReducer(function(prevState,action){
               // dispatch最终会执行到该函数。
               // prevState是状态：指的是上一次该函数返回的结果，如果该函数未运行过，那么指的是初始值
               // 返回的结果即是最新的数据状态
               state = {...prevState} // {num:1}
               state.a = 100;
               return state;
          },{a:1,b:2});
 */
export default function App(props) {
  const [state, dispatch] = useReducer(
    function (prevState, action) {
      const state = { ...prevState };
      if (action.type === "ADD_ONE") state.a += action.payload;
      return state;
    },
    {
      a: 1,
      b: 2,
    }
  );

  // dispatch最终会执行到该函数。
  // prevState�
  return (
    <div>
      <h3>App</h3>
      <button
        onClick={() => {
          dispatch({
            type: "ADD_ONE",
            payload: 1,
          });
        }}
      >
        点我
      </button>
      <p>a:{state.a}</p>
      <p>b:{state.b}</p>
    </div>
  );
}
